// 单元属性
<template>
  <div class="tableAuto">
    <div class="btngroup" style="padding-right:15px;text-align:right;margin-bottom:10px">
      <!--            <el-button type="primary" size="small" @click="handleAdd()">{{ $t("common.add") }}</el-button>-->
      <el-button type="primary" size="small" @click="handleEdit()">{{ $t("common.edit") }}</el-button>
      <!--            <el-button type="primary" size="small" @click="handleDel()">{{ $t("common.remove") }}</el-button>-->
    </div>
    <el-table :data="tableData" style="width:100%" :height="height" @row-click="rowClick" border stripe
      :header-cell-style="{background:'#EAEBEC'}" v-loading="tableLoading" ref="refTable" highlight-current-row @sort-change='sortChange'>
      <el-table-column label="" width="50" align="center">
        <template slot-scope="scope">
          <div>
            <el-radio :label="scope.row.fid" v-model="childId">&nbsp;</el-radio>
          </div>
        </template>
      </el-table-column>
      <el-table-column type="index" :label="$t('common.number')" width="90" align="center">
        <template slot-scope="scope">
          {{table_index(scope.$index+1)}}
        </template>
      </el-table-column>
      <el-table-column prop="name" show-overflow-tooltip :label="$t('basic.lable_name')" width="120" sortable='custom'>
        <template slot-scope="scope">
          {{scope.row.equipmentClassTagDefineVo ? scope.row.equipmentClassTagDefineVo.name : ""}}
        </template>
      </el-table-column>
      <el-table-column prop="type" show-overflow-tooltip :label="$t('basic.data_type')" width="100">
        <template slot-scope="scope">
          {{getDataType(scope.row.equipmentClassTagDefineVo ? scope.row.equipmentClassTagDefineVo.type : "")}}
        </template>
      </el-table-column>
      <el-table-column prop="wr" show-overflow-tooltip :label="$t('basic.read_write')" width="110" sortable='custom'>
        <template slot-scope="scope">
          {{getwrName(scope.row.equipmentClassTagDefineVo ? scope.row.equipmentClassTagDefineVo.wr : "")}}
        </template>
      </el-table-column>
      <el-table-column prop="uom" show-overflow-tooltip :label="$t('basic.company')" width="130" sortable='custom'>
        <template slot-scope="scope">
          {{scope.row.equipmentClassTagDefineVo ? scope.row.equipmentClassTagDefineVo.uom : ""}}
        </template>
      </el-table-column>

      <el-table-column prop="isCommu" :label="$t('basic.device_commu')" width="100">
        <template slot-scope="scope">
          <el-switch v-model="scope.row.equipmentClassTagDefineVo.isCommu" disabled />
        </template>
      </el-table-column>
      <el-table-column prop="defaultVal" show-overflow-tooltip :label="$t('basic.default_val')" width="150">
        <template slot-scope="scope">
          {{scope.row.defaultVal }}
        </template>
      </el-table-column>

      <!-- <el-table-column prop="hiAddr"    width="120" show-overflow-tooltip label="hiAddr"  sortable='custom'></el-table-column>
            <el-table-column prop="hihiAddr"  width="120" show-overflow-tooltip label="hihiAddr" sortable='custom'></el-table-column>
            <el-table-column prop="loAddr"    width="120" show-overflow-tooltip label="loAddr" sortable='custom'></el-table-column>
            <el-table-column prop="loloAddr"  width="120" show-overflow-tooltip label="loloAddr" sortable='custom'></el-table-column> -->
      <el-table-column prop="tagAddr" show-overflow-tooltip :label="$t('system.address')"></el-table-column>

    </el-table>
    <div class="pagination-area">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-sizes="[5, 10,20, 30]"
        :page-size="pager.pageSize" :current-page="pager.pageNum" layout="total, sizes, prev, pager, next, jumper" :total="pager.total">
      </el-pagination>
    </div>

    <el-dialog v-dialogDrag :title="title == 1 ? $t('common.add') :  $t('common.edit')" :visible.sync="dialogVisible"
      :close-on-click-modal="false" :width="screenWidth > 1024 ? '30%' : '50%'" class="isShowDialog" append-to-body
      :before-close="handleClose">
      <el-form :model="formData" label-width="60px" ref="ruleForm" size="small" :rules="rules" :hide-required-asterisk="true">
        <el-row :gutter="35">
          <!--                    <el-col :xs="24">-->
          <!--                        <el-form-item label="设备类单元参数" prop="classTagId" class="selectClass">-->
          <!--							<el-select v-model="formData.classTagId" placeholder="" clearable>-->
          <!--                                <el-option v-for="item in EquipmentClassList" :key="item.fid" :label="item.name" :value="item.fid"></el-option>-->
          <!--                            </el-select>-->
          <!--						</el-form-item>-->
          <!--                    </el-col>-->
          <!--                    <el-col :xs="24">-->
          <!--                        <el-form-item label="HiHi" prop="hihiAddr" class="passLine">-->
          <!--                            <el-input type="number" v-enterNumber2  :disabled="!formData.hihiEnable" v-model="formData.hihiAddr" placeholder="">-->
          <!--                                <template slot="append">-->
          <!--                                    <el-checkbox v-model="formData.hihiEnable"></el-checkbox>-->
          <!--                                </template>-->
          <!--                            </el-input>-->
          <!--                        </el-form-item>-->
          <!--                    </el-col>-->
          <!--                    <el-col :xs="24">-->
          <!--                        <el-form-item label="Hi" prop="hiAddr" class="passLine">-->
          <!--                            <el-input type="number" v-enterNumber2 :disabled="!formData.hiEnable" v-model="formData.hiAddr" placeholder="">-->
          <!--                                <template slot="append">-->
          <!--                                    <el-checkbox v-model="formData.hiEnable"></el-checkbox>-->
          <!--                                </template>-->
          <!--                            </el-input>-->
          <!--                        </el-form-item>-->
          <!--                    </el-col>-->
          <!--                    <el-col :xs="24">-->
          <!--                        <el-form-item label="Lo" prop="loAddr" class="passLine">-->
          <!--                            <el-input type="number" v-enterNumber2 :disabled="!formData.loEnable" v-model="formData.loAddr" placeholder="">-->
          <!--                                <template slot="append">-->
          <!--                                    <el-checkbox v-model="formData.loEnable"></el-checkbox>-->
          <!--                                </template>-->
          <!--                            </el-input>-->
          <!--                        </el-form-item>-->
          <!--                    </el-col>-->
          <!--                    <el-col :xs="24">-->
          <!--                        <el-form-item label="LoLo" prop="loloAddr" class="passLine">-->
          <!--                            <el-input type="number" v-enterNumber2 :disabled="!formData.loloEnable" v-model="formData.loloAddr" placeholder="">-->
          <!--                                <template slot="append">-->
          <!--                                    <el-checkbox v-model="formData.loloEnable"></el-checkbox>-->
          <!--                                </template>-->
          <!--                            </el-input>-->
          <!--                        </el-form-item>-->
          <!--                    </el-col>-->

          <!-- <el-col :xs="24">
                        <el-form-item :label="$t('basic.lable_name')" prop="tagName">
							<el-input v-model="formData.tagName" placeholder="" clearable></el-input>
						</el-form-item>
                    </el-col>
                    <el-col :xs="24">
                        <el-form-item :label="$t('basic.data_type')" prop="dataType" class="selectClass">
							<el-select v-model="formData.dataType" placeholder="" clearable>
                                <el-option v-for="(item,index) in dataTypeList" :key="index" :label="item.label" :value="item.value"></el-option>
                            </el-select>
						</el-form-item>
                    </el-col>
                    <el-col :xs="24">
                        <el-form-item :label="$t('basic.read_write')" prop="readWrite" class="selectClass">
							<el-select v-model="formData.readWrite" placeholder="" clearable>
                                <el-option :label="$t('basic.read_write')" value="0"></el-option>
                                <el-option label="只读" value="1"></el-option>
                                <el-option label="只写" value="2"></el-option>
                            </el-select>
						</el-form-item>
                    </el-col>
                    <el-col :xs="24">
                        <el-form-item :label="$t('basic.company')" prop="uom" class="selectClass">
                            <el-select v-model="formData.uom" placeholder="" clearable>
                                <el-option v-for="(item,index) in uomIdList" :key="index" :label="item.fid" :value="item.fid"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col> -->
          <el-col :xs="24">
            <el-form-item :label="$t('basic.lable_name')" prop="defaultVal">
              <el-input v-model="formData.tagName" placeholder="" disabled> </el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24">
            <el-form-item :label="$t('basic.default_val')" prop="defaultVal">
              <el-input v-model="formData.defaultVal" placeholder="" clearable> </el-input>
            </el-form-item>
          </el-col>
          <el-col :xs="24">
            <el-form-item :label="$t('system.address')" prop="tagAddr">
              <el-select v-model="formData.tagAddr" placeholder="" clearable :disabled="!isShowAddr">
                <el-option v-for="(item,index) in uomIdList" :key="index" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="handleClose">{{ $t("common.cancel") }}</el-button>
        <el-button size="small" type="primary" @click="handleSubmit('ruleForm')" :loading="loading">{{ $t("common.determine") }}</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
import { configure } from '@/api/configure'
export default {
  props: {
    screenWidth: Number,
    radioId: String,
    equipmentClassId: String,
  },
  data () {
    let hihiFn = (rule, value, callback) => {
      if (this.formData.hihiEnable && !value) {
        callback(new Error('请输入HiHi'));
      } else {
        callback();
      }
    }
    let hiFn = (rule, value, callback) => {
      if (this.formData.hiEnable && !value) {
        callback(new Error('请输入Hi'));
      } else {
        if (this.formData.hihiEnable && (parseFloat(value) >= parseFloat(this.formData.hihi))) {
          callback(new Error('Hi不能大于等于HiHi'));
        } else {
          callback();
        }
      }
    }
    let loFn = (rule, value, callback) => {
      if (this.formData.loEnable && !value) {
        callback(new Error('请输入Lo'));
      } else {
        if (this.formData.hiEnable && (parseFloat(value) >= parseFloat(this.formData.hi))) {
          callback(new Error('Lo不能大于等于Hi'));
        } else if (!this.formData.hiEnable && this.formData.hihiEnable && (parseFloat(value) >= parseFloat(this.formData.hihi))) { //如果hi没填  hihi填了 则去和hihi比较
          callback(new Error('Lo不能大于等于HiHi'));
        } else {
          callback();
        }
      }
    }
    let loloFn = (rule, value, callback) => {
      if (this.formData.loloEnable && !value) {
        callback(new Error('请输入LoLo'));
      } else {
        if (this.formData.loEnable && (parseFloat(value) >= parseFloat(this.formData.lo))) {
          callback(new Error('LoLo不能大于等于Lo'));
        } else if (!this.formData.loEnable && this.formData.hiEnable && (parseFloat(value) >= parseFloat(this.formData.hi))) {
          callback(new Error('LoLo不能大于等于Hi'));
        } else if (!this.formData.loEnable && !this.formData.hiEnable && this.formData.hihiEnable && (parseFloat(value) >= parseFloat(this.formData.hihi))) {
          callback(new Error('LoLo不能大于等于HiHi'));
        } else {
          callback();
        }
      }
    }
    return {
      tableData: [],
      height: 32 * 6.5,
      tableLoading: false,
      dialogVisible: false,
      loading: false,
      childId: '',
      title: 1, //1新增 2 编辑
      formData: {
        tagName: "",
        defaultVal: "",
        tagAddr: "", //地址
      },
      pager: {
        pageNum: 1,
        pageSize: 5,
        total: 0,
        field: '',
        order: ''
      },
      dataTypeList: [{
        label: "Float",
        value: "0"
      }, {
        label: "Int",
        value: "1"
      }, {
        label: "String",
        value: "2"
      }, {
        label: "Bool",
        value: "3"
      }],
      rules: {
        // classTagId:[{ required: true, message: '设备类单元参数', trigger: 'change' }],
        // hihiAddr:[{ validator: hihiFn, trigger: 'blur' }],
        // hiAddr:[{ validator: hiFn, trigger: 'blur' }],
        // loAddr:[{ validator: loFn, trigger: 'blur' }],
        // loloAddr:[{ validator: loloFn, trigger: 'blur' }],
        // tagName:[{ required: true, message: '标签名称不能为空', trigger: 'blur' }],
        // dataType:[{ required: true, message: '数据类型不能为空', trigger: 'change' }],
        // readWrite:[{ required: true, message: '读写不能为空', trigger: 'change' }],
        // uom:[{ required: true, message: '单位不能为空', trigger: 'change' }],
        // tagAddr: [{ required: true, message: '地址不能为空', trigger: 'blur' }]
      },
      currObj: {},
      uomIdList: [],
      floatAddrList: [],
      strAddrList: [{
        label: "SAS_0",
        value: "SAS_0"
      }, {
        label: "SAS_1",
        value: "SAS_1"
      }],
      EquipmentClassList: [],
      wrList: [{
        label: "读写",
        value: 0
      }, {
        label: "只读",
        value: 1
      }, {
        label: "只写",
        value: 2
      }],
      isShowAddr: true,
    }
  },
  watch: {
    radioId (val) {
      if (val) {
        // this.getEquipmentClassTagDefineList()
      }
    }
  },

  created () {
    this.getFloatAddr()
  },
  methods: {
    getFloatAddr () {
      for (let i = 0; i < 10; i++) {
        this.floatAddrList.push({
          label: "SA_" + i,
          value: "SA_" + i
        })
      }
    },
    getUnitTagsDefineList () {
      const param = {
        eqmId: this.radioId,
        page: this.pager.pageNum,
        size: this.pager.pageSize,
        field: this.pager.field,
        order: this.pager.order
      }
      this.tableLoading = true
      configure.getUnitTagsDefineList(param).then(res => {
        if (res.code == 200) {
          this.tableData = res.data.rows
          this.pager.total = res.data.total
        }
        this.tableLoading = false
      }).catch(e => {
        this.tableLoading = false
      })
    },
    getEquipmentClassTagDefineList () {
      const param = {
        page: 1,
        size: 88888888,
        equipmentClassId: this.equipmentClassId
      }

      this.tableLoading = true
      configure.getEquipmentClassTagDefineList(param).then(res => {
        this.tableLoading = false
        if (res.code == 200) {
          this.EquipmentClassList = res.data.rows
        }
      }).catch(e => {
        this.tableLoading = false
        this.$message.error('服务器繁忙,请稍后再试');
      })
    },
    rowClick (row) {
      this.childId = row.fid
      this.currObj = row

    },
    handleAdd () {
      if (this.radioId === '') {
        this.$message.error('请选择设备');
        return
      }
      this.title = 1
      this.dialogVisible = true
    },
    async handleEdit () {
      if (this.childId === '') {
        this.$message.error(this.$t('dialog.please_sel_edit'));
        return
      }

      let copyRow = this.tableData.find(item => item.fid == this.childId)
      if (copyRow.equipmentClassTagDefineVo.type == "0") {
        this.uomIdList = this.floatAddrList
      } else if (copyRow.equipmentClassTagDefineVo.type == "2") {
        this.uomIdList = this.strAddrList
      }


      let res = await configure.findUnitTagsDefine({ fid: this.childId })
      if (res.code == 200) {
        this.formData = Object.assign({}, res.data)
        this.formData.tagName = copyRow.equipmentClassTagDefineVo.name


        this.title = 2
        this.dialogVisible = true
        if (copyRow.equipmentClassTagDefineVo.isCommu) {
          this.isShowAddr = true
          this.rules = {
            tagAddr: [{ required: true, message: '地址不能为空', trigger: 'blur' }]
          }
        } else {
          this.isShowAddr = false
          this.rules = {}
        }
      } else {
        this.$message.error('暂无此数据');
      }

    },
    async handleDel () {
      if (this.childId === '') {
        this.$message.error(this.$t('dialog.please_sel_del'));
        return
      }
      let res = await configure.findUnitTagsDefine({ fid: this.childId })
      let that = this
      if (res.code == 200) {
        that.$customConfirm({
          content: "请确认是否删除单元参数" + this.currObj.entName,
          onok () {
            configure.removeUnitTagsDefine(res.data.fid).then(res1 => {
              if (res1.code == 200) {
                that.childId = ""
                that.getUnitTagsDefineList()
                that.$message({ duration: 1000, type: 'success', message: '删除成功!' });
              }
            })
          }
        });
      } else {
        this.$message.error(res.msg);
      }
    },
    sortChange (column) {
      if (column.order === 'descending') {
        this.pager.field = column.prop
        this.pager.order = 'DESC'
      } else {
        this.pager.field = column.prop
        this.pager.order = 'ASC'
      }
      this.pager.pageNum = 1
      this.getUnitTagsDefineList()
    },
    table_index (index) {
      return (this.pager.pageNum - 1) * this.pager.pageSize + index
    },
    getDataType (id) {
      if (!id && id !== 0) return ''
      return this.dataTypeList.find(item => item.value == id).label
    },
    handleSizeChange (val) {
      this.pager.pageNum = 1
      this.pager.pageSize = val
      this.getUnitTagsDefineList()
    },
    handleCurrentChange (val) {
      this.pager.pageNum = val;
      this.getUnitTagsDefineList()
    },
    handleSubmit (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          const param = {
            ...this.formData,
            eqmId: this.radioId,
          }
          // param.hihiEnable = this.formData.hihiEnable === false ? 0 : 1
          // param.hiEnable = this.formData.hiEnable === false  ? 0 : 1
          // param.loEnable = this.formData.loEnable === false  ? 0 : 1
          // param.loloEnable = this.formData.loloEnable === false  ? 0 : 1
          if (this.title == 2) {
            param.fid = this.childId
          }
          this.loading = true
          configure.unitTagsDefineAdd(param, this.title).then(res => {
            if (res.code == 200) {
              this.getUnitTagsDefineList()
              this.dialogVisible = false
              this.$refs['ruleForm'].resetFields();
            }
            this.loading = false
          }).catch(e => {
            this.loading = false
          })
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    handleClose () {
      this.dialogVisible = false
      this.$refs['ruleForm'].resetFields();
    },
    // 获取计量单位列表
    getUomList () {
      const param = {
        page: 1,
        size: 9999
      }
      configure.getUomList(param).then(res => {
        if (res.code == 200) {
          this.uomIdList = res.data.rows
        }
      }).catch(e => {

      })
    },
    getwrName (id) {
      if (!id && id !== 0) return ''
      return this.wrList.find(item => item.value == id).label
    }
  },
}
</script>

<style scoped>
.selectClass >>> .el-select {
  width: 100%;
}
.tableAuto >>> .el-row {
  margin: 0 !important;
}
.isShowDialog >>> .el-select {
  width: 100%;
}
.pagination-area {
  padding: 10px;
  border: 1px solid #eaebec;
  border-top: none;
}
</style>